<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>native</title>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <meta http-equiv=X-UA-Compatible content="ie=edge">
    <link href="assets/css/common.css" rel="stylesheet">
    <script src=https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <link href="../asset/swiper/swiper.min.css" rel="stylesheet">
    <script src="../asset/swiper/swiper.min.js"></script>
    <script src="assets/js/common.js"></script>
</head>
<body>
<style>
    .swiper-container{
        width: 98%;
        height:200px;
        border-radius: 5px;
    }
    .swiper-slide{
        border-radius: 5px;
    }
    .swiper-slide img{
        width: 100%;
        height: 200px;
        border-radius: 5px;
    }
    .native-type{
        position: relative;
        width: 100%;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .native-type ul{
        width: 100%;
        display: flex;
    }
    .native-type ul li{
        border-radius: 30%;
        align-items: center;
        justify-content: center;
        flex: 1;
    }
    .native-type ul li img{
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 15px;
        margin: 0 auto;
    }
    .type-name{
        color: black;
        font-weight: lighter;
        white-space: nowrap;
        font-size: 15px;
        text-align: center;
    }
    .swiper-pagination-bullet{
        float: right;
        background-color: white;
    }
    .swiper-pagination-bullet-active{
        width: 16px;
        background-color: rgba(255, 69, 0, 0.92);
        border-radius: 5px;
        animation:active 0.2s ease-in-out;
    }
    @keyframes active {
        0%{width: 10px;}
        100%{width: 16px;}
    }
    .likes{
        position: relative;
        width: 90%;
        height: 200px;
        margin: 0 auto;
    }
    .likes .title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height:30px;
    }
    .likes .title .hot{
        height: 30px;
    }
    .hot_icon{
        background-image: url("assets/images/hot.png");
        background-size: 100% 100%;
        width: 30px;
        height: 30px;
    }
    .hot_icon_narrow{
        background-image: url("assets/images/narrow.png");
        background-size: 100% 100%;
        width: 30px;
        height: 30px;
    }
    .center_between{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    ::-webkit-scrollbar{width:0}
    .like_content{
        width: 100%;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        background-color: rgba(211, 211, 211, 0.33);
    }
    .like_item{
        padding-bottom: 5px;
        width:43vw;
        height: 170px;
        border-radius: 5px;
        overflow: hidden;
        background-color: white;
    }
    .view_cover{
        position: relative;
        color: white;
        width: 100%;
        height:110px;
    }
    .bottom{
        position: absolute;
        bottom: 0;
    }
    .view-bottom{
        width: 100%;
        height: 20px;
    }
    .more{
        width: 15px;
        height: 15px;
        margin-right: 15px;
        background-image: url("assets/images/more.png");
        background-size: 100% 100%;
    }
    .capsule{
        height: 10px;
        padding: 3px 4px;
        border-radius: 10px;
        background-color: orange;
        color: white;
        font-size: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
    }
    .view_lable{
        display: flex;
    }
    .cover_back{
        position: absolute;
        width: 100%;
        height: 110px;
    }
    .view_title{
    }
    .view_num{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hot-icon{
        width:12px;
        height: 12px;
    }
    .start_native{
        position: fixed;
        right: -82px;
        top:50%;
        width: 100px;
        height: 30px;
        border-radius: 5px;
        background-image: linear-gradient(90deg,#0af,#0085ff);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hidden{
        right: -82px;
    }
    .narrow_show{
        position: absolute;
        left: 2px;
        background-image: url("assets/images/narrow_left.png");
        background-size: 100% 100%;
        width: 15px;
        height: 15px;
    }
    .narrow_hidden{
        display: none;
        left: 2px;
        background-image: url("assets/images/narrow_right.png");
        background-size: 100% 100%;
        width: 15px;
        height: 15px;
    }
    .loading{
        position: fixed;
        width: 200px;
        height: 200px;
        margin:0 auto;
        top:200px;
        bottom:0;
        left:0;
        right:0;
        z-index: 999;
    }
    .loading img{
        width: 100%;
        height: 100%;
    }
</style>
<div class="loading">
    <img src="assets/images/vue_loading.gif" alt="">
</div>
<div id="app" style="display:none;">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="i in banner"><img :src="i.img" :alt="i.title"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="native-type">
        <div style="width: 100%">
            <ul>
                <li v-for="i in type.slice(0,5)">
                    <img :src="i.url" alt="">
                    <p class="type-name">@{{i.name}}</p>
                </li>
            </ul>
            <ul>
                <li v-for="i in type.slice(5,11)">
                    <img :src="i.url" alt="">
                    <p class="type-name">@{{i.name}}</p>
                </li>
                <li>
                    <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2669601758,506659101&fm=26&gp=0.jpg" alt="">
                    <p class="type-name">更多</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="likes">
        <div class="title">
            <div class="hot" style="display: flex;align-items: center;justify-content: center"><div class="hot_icon"></div><p>猜你喜欢</p></div>
            <div class="hot" style="display: flex;align-items: center;justify-content: center;right: 30px;"><div class="hot_icon_narrow"></div><p style="color: orange;font-weight: lighter;font-size: 12px;">点我更准</p></div>
        </div>
        <div class="like_content center_between">
            <div class="like_item" v-for="i in native_data">
                <div class="view_cover" @click="native_push.start_player(i.info.play,i.info.rtmp_url,i.info.user_id)">
                    <div class="view_info">
                        <img class="cover_back" :src="i.info.cover" alt="">
                        <div class="center_between bottom" >
                            <div class="view_info">@{{i['info']['title']}}</div>
                            <div class="view_num">
                                <img class="hot-icon" src="assets/images/hot-white.png" alt="">
                                <p>@{{i.info.hot}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="view_title">@{{i.info.description}}</div>
                <div class="center_between view-bottom">
                    <div class="view_lable">
                        <span class="capsule" v-for="info in i['infos']">@{{info}}</span>
                    </div>
                    <div class="more"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="start_native">
        <div class="narrow_show" @click="show()"></div>
        <div class="narrow_hidden" @click="hidden()"></div>
        <div onclick="native_push.start()">我要直播</div></div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            banner:[],
            type:[],
            is_load_banner:false,
            native_data:[],
            native_data_:[{
                title: "李佳琪的直播",
                message: "李佳琪打假",
                hot:"3w",
                cover:"",
                description:"李佳琪洗白",
                infos: ['翻车王', '良心']
            },{
                title: "李佳琪的直播",
                message: "李佳琪打假",
                hot:"3w",
                cover:"",
                description:"李佳琪洗白",
                infos: ['翻车王', '良心']
            },{
                title: "李佳琪的直播",
                message: "李佳琪打假",
                hot:"3w",
                cover:"",
                description:"李佳琪洗白",
                infos: ['翻车王', '良心']
            },{
                title: "李佳琪的直播",
                message: "李佳琪打假",
                hot:"3w",
                cover:"",
                description:"李佳琪洗白",
                infos: ['翻车王', '良心']
            },{
                title: "李佳琪的直播",
                message: "李佳琪打假",
                hot:"3w",
                cover:"",
                description:"李佳琪洗白",
                infos: ['翻车王', '良心']
            },{
                title: "李佳琪的直播",
                message: "李佳琪打假",
                hot:"3w",
                cover:"",
                description:"李佳琪洗白",
                infos: ['翻车王', '良心']
            },{
                title: "李佳琪的直播",
                message: "李佳琪打假",
                hot:"3w",
                cover:"",
                description:"李佳琪洗白",
                infos: ['翻车王', '良心']
            }]
        },
        watch:{
            banner(oldval,newval){
                this.is_load_banner=true;
            }
        },
        updated(){
            if(this.is_load_banner){
                var self=this;
                setTimeout(function () {
                    self.init_swiper();
                },300);
                this.is_load_banner=false;
            }
        },
        created(){
            this.init_banner();
            this.init_type();
            this.init_online();
            var self=this;
            setInterval(function () {
                self.init_online();
            },2000);
        },
        methods:{
            init_banner(){
                var self=this;
                axios.get(server+"native/banner")
                    .then(function (res) {
                        self.banner=res.data;
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            init_online(){
                var self=this;
                axios.get(server+"native/online")
                    .then(function (res) {
                        vue_onload("#app",'.loading');
                        self.native_data=res.data
                    })
                    .catch(function () {

                    })
            },
            init_type(){
                var self=this;
                axios.get(server+"native/type")
                    .then(function (res) {
                        self.type=res.data.data
                    }).catch(function (err) {

                })
            },
            init_swiper(){
                var mySwiper = new Swiper ('.swiper-container', {
                    direction: 'horizontal', // 垂直切换选项
                    loop: true, // 循环模式选项

                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                })
            },
            hidden(){
                $(".start_native").animate({right:"-82px"},150);
                $(".narrow_show").show(150);
                $(".narrow_hidden").hide(150);
            },
            show(){
                $(".narrow_show").hide(150);
                $(".narrow_hidden").show(150);
                $(".start_native").animate({right:"0px"},150)
            },
        }
    })
</script>
</html>